<script setup lang="ts">
import { computed } from 'vue';
import { message } from 'ant-design-vue';
import { CopyOutlined } from '@ant-design/icons-vue';
import type { SubmissionVO } from '@/api/Submission.ts';

const props = defineProps<{
  visible: boolean;
  submission: SubmissionVO | null;
}>();

const emit = defineEmits<{
  'update:visible': [value: boolean];
}>();

const handleClose = () => {
  emit('update:visible', false);
};

// 复制代码
const copyCode = async () => {
  if (!props.submission?.code) return;
  
  try {
    await navigator.clipboard.writeText(props.submission.code);
    message.success('代码已复制到剪贴板');
  } catch (err) {
    message.error('复制失败，请手动复制');
  }
};

// 语言映射
const languageMap: Record<string, string> = {
  java: 'Java',
  cpp: 'C++',
  python: 'Python',
  javascript: 'JavaScript',
  go: 'Go'
};

const displayLanguage = computed(() => {
  return languageMap[props.submission?.language || ''] || props.submission?.language || '未知';
});
</script>

<template>
  <a-modal
    :open="visible"
    title="查看代码"
    :width="800"
    @cancel="handleClose"
    :footer="null"
  >
    <div v-if="submission" class="space-y-4">
      <!-- 提交信息 -->
      <div class="flex items-center gap-4 p-3 bg-gray-50 rounded-lg">
        <div>
          <span class="text-gray-600">语言:</span>
          <span class="ml-2 font-medium">{{ displayLanguage }}</span>
        </div>
        <div>
          <span class="text-gray-600">提交时间:</span>
          <span class="ml-2 font-medium">{{ new Date(submission.createTime).toLocaleString('zh-CN') }}</span>
        </div>
      </div>

      <!-- 代码区域 -->
      <div>
        <div class="mb-2 flex items-center justify-between">
          <span class="text-sm font-semibold text-gray-700">提交代码:</span>
          <a-button 
            size="small" 
            @click="copyCode"
            class="flex items-center gap-1"
          >
            <CopyOutlined />
            复制代码
          </a-button>
        </div>
        <pre class="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto max-h-[500px] text-sm"><code>{{ submission.code }}</code></pre>
      </div>
    </div>
  </a-modal>
</template>

<style scoped>
pre {
  margin: 0;
}

code {
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}
</style>
